<template>
  <div>
    <el-form  label-position="right" size="small" label-width="80px" class="base-search-more">
       <el-row>
        <el-col :span="6">
          <el-form-item label="区域">
            <el-input style="width: 100%;" placeholder="输入区域名称" v-model="params.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="手机号">
            <el-input style="width: 100%;" placeholder="请输入手机号" v-model="params.mobile"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleSizeChange(10)">查询</el-button>
            <el-button type="primary" plain icon="el-icon-plus" @click="addCityManager(1)">新增</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="base-table-wrap">
      <el-table :data="tableData.list" stripe style="width: 100%">
        <el-table-column prop="name" label="区域名称" min-width="140" align="center"></el-table-column>
        <el-table-column prop="mobile" label="手机号" min-width="140" align="center"></el-table-column>
        <el-table-column prop="username" label="登录账号" min-width="140" align="center"></el-table-column>
        <el-table-column prop="rname" label="所属角色" min-width="120" align="center"></el-table-column>
        <el-table-column prop="coefficient" label="返点比例(%)" min-width="120" align="center"></el-table-column>
        <el-table-column prop="createtime" label="账号创建时间" min-width="140" align="center"></el-table-column>
        <el-table-column prop="" label="最后登录时间" min-width="140" align="center"></el-table-column>
       <!-- <el-table-column label="账号状态" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.state }}</span>
          </template>
        </el-table-column>-->
        <el-table-column fixed="right" label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button class="el-text-check" type="text" @click="addCityManager(2,scope.row)">编辑</el-button>
            <el-button class="el-text-danger" type="text" @click="changePass(scope.row.id)" style="color:#f56c6c;">修改密码</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 复制 el-table v-loading  v-loading无法快速响应 所有自定义 -->
      <div class="base-directives-loading" v-show="isloadingTable">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <div class="base-pagination clearfix">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="newPage" :pageSize='pageSize'
                       :page-sizes="[10, 20, 30, 40]" background layout="total,sizes, prev, pager, next, jumper"
                       :total="tableData.total">
        </el-pagination>
      </div>
    </div>
    <el-dialog width="400px" :title="form.id?'修改区域代理':'添加区域代理'" v-dialogDrag :close-on-press-escap="true"
               :visible.sync="dialogTableVisible">

      <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm" size="small">
        <el-form-item label="账号名称" prop="username" :rules="[{ required: true, message: '请输入账号名称', trigger: 'blur' }]">
          <el-input v-model="form.username" placeholder="6-14位字符，可由字母、数字组成"></el-input>
        </el-form-item>

        <el-form-item label="区域名称" prop="name" :rules="[{ required: true, message: '请输入员工姓名', trigger: 'blur' }]">
          <el-input v-model="form.name" placeholder="请输入员工姓名"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" :rules="[{ required: true, message: '请输入手机号', trigger: 'blur' }]">
          <el-input v-model="form.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="服务地区" prop="province"
                      :rules="[{required: true, message: '服务地区未填', trigger: 'change'}]">
          <el-input type="text" v-model="form.province" placeholder="请输入服务地区" />
        </el-form-item>
        <el-form-item label="设置返点" prop="coefficient" :rules="[{ required: true, message: '请输入返点', trigger: 'blur' }]">
          <el-input-number v-model="form.coefficient" :min='0' :max='100' :precision='1' /> %
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" :loading='isloadingsubmit' @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改密码" v-dialogDrag :visible.sync="dialogPassVisible" width="400px"
               :close-on-press-escap="true">
      <el-form :model="ruleForm" ref="ruleForm2" label-width="100px" class="demo-ruleForm" size="small">
        <el-form-item label="新密码" prop="password" :rules="[
                      {min: 6, max: 18, message: '密码6到18个字符', trigger: 'blur'},
                      {validator: validatePass1, trigger: 'blur'}]">
          <el-input v-model="ruleForm.password" type="password" ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="password1" :rules="[
                      {validator: validatePass2, trigger: 'blur'},
                      {min: 6, max: 18, message: '密码6到18个字符', trigger: 'blur'}]">
          <el-input v-model="ruleForm.password1" type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogPassVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm2('ruleForm2')" :loading='isloadingsubmit'>保存</el-button>
      </span>
    </el-dialog>

  </div>

</template>
<script>
  import levelLinkage from '@/components/levelLinkageOne'
  import imd5 from '@/utils/md5.js'
  export default {
    components: { levelLinkage },
    data() {
      return {
        params: { // 查询数据
          page: 0,
          size: 10,
          mobile: '',
          name: ''
        },
        form: {
          username: '',
          name: '',
          mobile: '',
          pid: '',//省id
          cid: '', //市id
          tid: '',//县id
          province: '', //省名称
          cityname: '', //市名称
          countyname: '', //县名称
          coefficient: null,
          id: '',
        },
        ruleForm: {
          id:'',
          password: '',
          password1: '',
        },
        isfirstShow: false, //控制是否接受子组件的数据
        isloadingTable: false,
        isloadingsubmit: false,
        dialogTableVisible: false,
        dialogPassVisible: false,
        tableData: {},
        pageSize: 10,
        newPage: 1
      }
    },
    methods: {
      validatePass1(rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.password1 !== '') {
            this.$refs.ruleForm2.validateField('password1');
          }
          callback()
        }
      },
      validatePass2(rule, value, callback) {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      addCityManager(type, row) {
        this.dialogTableVisible = true
        if (type == 1) {
          this.isfirstShow = false
          this.$nextTick(() => {
            this.$refs['ruleForm'].resetFields()
            this.form.id = ''
          });
        } else if (type == 2) {
          this.$nextTick(() => {
            this.$refs['ruleForm'].resetFields()
            this.form.username = row.username
            this.form.name = row.name
            this.form.mobile = row.mobile
            this.form.province = (row.province || '') + (row.cityname || '') + (row.countyname || '')
            this.form.coefficient = row.coefficient
            this.form.id = row.id
            this.isfirstShow = true
          })
        }
      },
      changePass(id) {
        this.dialogPassVisible = true
        this.$nextTick(() => {
          this.$refs['ruleForm2'].resetFields();
        });
        this.ruleForm.id = id||null
      },
      handleSizeChange(size) {  //切换条数
        this.params.size = size
        this.pageSize = size
        this.newPage = 1
        this.params.page = 0
        this.getTableList()
      },
      handleCurrentChange(page) {  //切换分页
        this.params.page = page - 1
        this.getTableList()
      },
      getTableList() {
        this.isloadingTable = true
        const params = {...this.params }
        this.$http.get('/server/areaAgent/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(() => { this.isloadingTable = false })
      },
      submitForm(ruleForm) { //提交城市经理
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            const params = { ...this.form }
            this.isloadingsubmit = true
            if (params.id) {
              this.$http.post('/server/areaAgent/update', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.dialogTableVisible = false
                  this.getTableList()
                }
              }).finally(err => { this.isloadingsubmit = false })
            } else {
              delete params.id
              this.$http.post('/server/areaAgent/save', JSON.stringify(params)).then(res => {
                if (res.data.success) {
                  this.dialogTableVisible = false
                  this.handleSizeChange()
                }
              }).finally(() => { this.isloadingsubmit = false })
            }
          } else {
            this.$message.error('有不合法的输入，请检查页面修改再提交')
            return false
          }
        })
      },
      submitForm2(ruleForm) { //提交密码修改
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            const params = {
              id: this.ruleForm.id,
              password: imd5.md5(this.ruleForm.password1)
            }
            this.isloadingsubmit = true
            this.$http.get('/server/areaAgent/setPassword?'+this.qs.stringify(params)).then(res => {
              if (res.data.success) {
                this.$message.success('密码修改成功')
                this.dialogPassVisible = false
              }
            }).finally(() => { this.isloadingsubmit = false })
          }
        })
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style scoped>

</style>
